

// 样式

// 定义变量有问题
// TODO：
.wk-switch{
  /* 定义四个变量 */
  --wk-switch-on-color:var(--wf-color-primary);
  --wk-switch-off-color:var(--wf-border-color);
  --wk-switch-on-border-color:var(--wf-color-primary);
  --wk-switch-off-border-color:var(--wf-border-color);
}
/* 最为外层装 switch的盒子 */
.wk-switch{
  margin: 10px;
  display: inline-flex;
  height: 32px;
  line-height: 20px;
  align-items: center;
  font-size: 14px;
  border:1px solid #efefef;
  .wk-switch__input:focus{
    outline: 1px solid blueviolet;
  }
  /* & 是指某种属性，这里表示当他被选中时 */
  &.is-checked{
    /* 只填变化的部分就行了，长方形改变的就是背景颜色和边框颜色 */
    .wk-switch__core{
      background-color:var(--wf-color-primary);
      border-color:var(--wf-color-primary);
      /* 圆形改变的就是 左边的距离 */
      .wk-switch__core-action{
        /* 计算 */
        left:calc(100% - 17px);
      }
    }
  }
}


/* switch 长方形 */
/* 由于圆形相当于是要在长方形上面移动，所以是“子绝父相” */
.wk-switch__core{
  display: inline-flex;
  height: 20px;
  min-width: 40px;
  align-items: center;
  position: relative;
  border:1px solid var(--wf-border-color);
  outline: none;
  border-radius: 10px;
  /* 确保是盒子模型，高度就是设定的值 */
  box-sizing: border-box;
  background-color: var(--wf-border-color);
  cursor: pointer;
  /* 动画渐变 */
  transition: border-color 0.5s,background-color 0.5s;

  /* 里面的圆形 */
  .wk-switch__core-action{
    position:absolute;
    left:1px;
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background-color: #efefef;
    transition: all 0.5s;
  }
}